<template>
  <MyMapHtml v-bind="$attrs"
             ref="html"
             positioning="bottom-center"
             :class="classes"
             :style="{'width': width}"
             v-clickoutside="handleClickOutside">
    <i class="my-map-popup__close el-icon-close" v-if="closable" @click="hide"></i>
    <div v-if="title" class="my-map-popup__title">
      <slot name="title">
        {{title}}
      </slot>
    </div>
    <div class="my-map-popup__body" :style="{'height': height}">
      <slot></slot>
    </div>
  </MyMapHtml>
</template>
<script>

import MyMapHtml from '../my-map-html/index.vue'
import clickoutside from 'element-ui/lib/utils/clickoutside'

export default {
  name: 'MyMapPopup',
  directives: {
    clickoutside
  },
  components: {
    MyMapHtml
  },
  props: {
    width: String,
    height: String,
    title: String,
    icon: [String, Object],
    closable: {
      type: Boolean,
      default: true
    },
    closeOnClick: Boolean,
    theme: {
      type: String,
      default: 'light',
      validator() {
        return ['dark', 'light']
      }
    },
    showArrow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  },
  computed: {
    iconProps() {
      if (!this.icon) return null
      return typeof this.icon === 'object' ? {...this.icon} : {name: this.icon}
    },
    classes() {
      return ['my-map-popup', `is-${this.theme}`, `${this.showArrow ? 'arrow' : ''}`]
    }
  },
  methods: {
    show(position) {
      const coordinate = position || this.$refs.html.position
      this.$refs.html.setPosition(coordinate)
      this.$emit('show', coordinate)
    },
    hide() {
      this.$refs.html.setPosition(null)
      this.$emit('hide')
    },
    handleClickOutside() {
      if (this.closeOnClick) {
        this.hide()
      }
    }
  },
  mounted() {
  }
}
</script>
<style scoped lang="scss">

</style>
